<script>
import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue"
import request from "@/utils/request"
import { handleUrlParams } from "@/utils"
import common from "@/studyRoom/common"
import { getEnv, getShowNginxPicUrl } from "@/utils/settings"
import store from "@/store"
import { studyRoomActionType } from "@/store/modules/studyRoom"

export default {
  name: "enterToStudyRoom",
  components: {
    uniPopup,
  },
  props: {
    // 自习室被禁止进入时是否跳转到活动详情页面
    jumpActivityDetailsPage: {
      type: Boolean,
      default: true,
    },
    // 跳转行为，navigateTo redirectTo
    jumpBehavior: {
      type: String,
      default: "navigateTo",
    },
    // 错误处理函数，用于处理错误信息
    errorHandler: {
      type: Function,
      default: () => {},
    },
		fromPage: {
			type: String,
			default: "",
		}
  },
  data() {
    return {
      message: "", //错误弹窗消息提示
      btnType: "", // 按钮类型，可取值有：confirm 确定；got_it 知道了；go_to 立即前往
      errorPopupPromise: {
        resolve: null,
        reject: null,
      },
    }
  },
  methods: {
    getShowNginxPicUrl,
    openErrorPopup(message) {
      return new Promise((resolve, reject) => {
        this.message = message || "抱歉，该自习室尚未开启~"
        this.$refs.popup.open()
        this.errorPopupPromise.resolve = resolve
        this.errorPopupPromise.reject = reject
      })
    },
    enterToStudyRoom(studyRoomId) {
      request({
        url: "studyRoom/allowEntryJoinStudy",
        data: {
          studyRoomId: studyRoomId,
        },
        showLoading: true,
      })
        .then((res) => {
					store.commit(studyRoomActionType.mutations.fromPage, this.fromPage)
          //不允许加入自习室弹窗警告
          if (res.statusCode === "Forbidden") {
            //自习室绑定了活动时，允许用户跳转到活动详情页面
            if (res.studyActivityId && this.jumpActivityDetailsPage) {
              this.btnType = "go_to" // 立即前往
              this.openErrorPopup(res.statusMsg).then(() => {
                //跳转到活动详情页面
                request({
                  url: "studyActivity/getActivityDetails",
                  data: {
                    studyActivityId: res.studyActivityId,
                  },
                  errorHandle: true,
                  showLoading: true,
                }).then((data) => {
                  common.viewActivityDetail(data)
                })
              })
            } else {
              this.btnType = "confirm" // 确定
              this.openErrorPopup(res.statusMsg).then(() => {
                this.errorHandler()
              })
            }
            //首次进入自习室，进入计划制定界面
          } else if (res.statusCode === "AllowedToSetting") {
            if (res.resultData) {
              store.commit(studyRoomActionType.mutations.studyRoomDetails, res.resultData)
            } else {
              store.commit(studyRoomActionType.mutations.studyRoomDetails, null)
            }
            uni[this.jumpBehavior]({
              url: handleUrlParams("/studyRoom/pages/makePlan/index", {
                studyRoomId: studyRoomId,
              }),
            })
            //进入自习室详情界面
          } else if (res.statusCode === "AllowedToStudy") {
            store.commit(studyRoomActionType.mutations.studyRoomDetails, res.resultData)
            uni[this.jumpBehavior]({
              url: handleUrlParams("/studyRoom/pages/learning/index"),
            })
          }
        })
        .catch((err) => {
          this.btnType = "got_it" // 知道了
          this.openErrorPopup(err).then(() => {
            this.errorHandler()
          })
        })
    },
  },
}
</script>

<template>
  <uni-popup ref="popup" type="center">
    <view class="popup-content">
      <image class="background" :src="getShowNginxPicUrl('Ai8DqDnhMdhGQNmw9edL.png')"></image>

      <view class="text-container">
        <text class="text">{{ message }}</text>
      </view>

      <!--		确定按钮	-->
      <image
        class="btn"
        @click="
          () => {
            $refs.popup.close()
            errorPopupPromise.resolve && errorPopupPromise.resolve()
          }
        "
        mode="heightFix"
        v-if="btnType === 'confirm'"
        :src="getShowNginxPicUrl('BCNXKchdGH5R9w7uehWg.png')"
      ></image>
      <!--			知道了按钮-->
      <image
        class="btn"
        @click="
          () => {
            $refs.popup.close()
            errorPopupPromise.resolve && errorPopupPromise.resolve()
          }
        "
        mode="heightFix"
        v-else-if="btnType === 'got_it'"
        :src="getShowNginxPicUrl('K7e0UMoAXVq3auPwzcYk.png')"
      ></image>
      <!--			立即前往按钮-->
      <image
        class="btn"
        @click="
          () => {
            $refs.popup.close()
            errorPopupPromise.resolve && errorPopupPromise.resolve()
          }
        "
        mode="heightFix"
        v-else-if="btnType === 'go_to'"
        :src="getShowNginxPicUrl('NgmmyrTLKLTLUKJk3po5.png')"
      ></image>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup-content {
  width: 620rpx;
  height: 544rpx;
  position: relative;
  > .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .text-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 400rpx;
    text-align: center;
    .text {
      color: #803d00;
      font-size: 32rpx;
      line-height: 1.5;
      // 文本溢出自动换行
      white-space: normal;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .btn {
    position: absolute;
    bottom: 30rpx;
    height: 130rpx;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>
